import React,{useState,useRef,useEffect} from "react";
import ReactDOM from "react-dom"
import "./PageTitle.css"
import * as echarts from 'echarts';
import {IconCommon,IconClockCircle,IconSearch, IconHome, IconSunFill, IconMoonFill} from "@arco-design/web-react/icon"
function getLastTenMonthsDates() {
    const today = new Date();
    const dates:any[] = [];
    let thisMonth=new Date().getMonth()
    for (let i = 0; i < 10; i++) {
        const year = today.getFullYear();
        const month = today.getMonth() - i;
        let lastDay = new Date(year, month + 1, 0).getDate();
        if(thisMonth==month){lastDay=new Date().getDate()}
        for (let day = lastDay; day >= 1; day--) {
        const date = new Date(year, month, day);
        dates.push(date.toLocaleDateString());
        }
    }

    return dates;
  }
  
const CreateTeleport=({
    close
})=>{
    const target=document.body
    let line1Ref=useRef()
    let left=document.getElementById('dashBordButton')?.getBoundingClientRect().x
    let dates=getLastTenMonthsDates() //获取前十个月的参数
    useEffect(()=>{
        var myChart = echarts.init(document.getElementById("radarImage"));
        // 绘制图表
        
        let radarOption = {
            title: {
              text: '雷达分类图',
              textStyle:{
                fontSize:14
              }
            },
            legend: {
              data: ['Allocated Budget', 'Actual Spending']
            },
            radar: {
              // shape: 'circle',
              indicator: [
                { name: '分类一', max: 9999 },
                { name: '分类二', max: 9999 },
                { name: '分类三', max: 9999 }
              ],
              radius:'50%'
            },
            series: [
              {
                name: 'Budget vs spending',
                type: 'radar',
                data: [
                  {
                    value: [100, 8, 5],
                    name: '文章分类'
                  }
                ]
              }
            ]
          };
        let lineOption={
            title: {
                text: '发布统计图',
                left: 'center'
              },
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
              },
              yAxis: {
                type: 'value'
              },
              series: [
                {
                  data: [150, 230, 224, 218, 135, 147, 260],
                  type: 'line'
                }
              ]
        }
        let circleOption={
            title: {
                text: '分类统计图',
                subtext: 'Fake Data',
                left: 'center'
              },
              tooltip: {
                trigger: 'item'
              },
              series: [
                {
                  name: 'Access From',
                  type: 'pie',
                  radius: '50%',
                  data: [
                    { value: 1048, name: 'Search Engine' },
                    { value: 735, name: 'Direct' },
                    { value: 580, name: 'Email' },
                    { value: 484, name: 'Union Ads' },
                    { value: 300, name: 'Video Ads' }
                  ],
                  emphasis: {
                    itemStyle: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                  }
                }
              ]
        }
        let barOption={
            title: {
                text: '标签统计图',
                subtext: 'Fake Data'
              },
              tooltip: {
                trigger: 'axis'
              },
              calculable: true,
              xAxis: [
                {
                  type: 'category',
                  // prettier-ignore
                  data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
                }
              ],
              yAxis: [
                {
                  type: 'value'
                }
              ],
              series: [
                {
                  name: 'Rainfall',
                  type: 'bar',
                  data: [
                    2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
                  ],
                  markPoint: {
                    data: [
                      { type: 'max', name: 'Max' },
                      { type: 'min', name: 'Min' }
                    ]
                  },
                  markLine: {
                    data: [{ type: 'average', name: 'Avg' }]
                  }
                }
              ]
        }
        myChart.setOption(radarOption)
        let lineChart=echarts.init(document.getElementById("lineImage"))
        let circleChart=echarts.init(document.getElementById("circleImage"))
        let barChart=echarts.init(document.getElementById("barImage"))
        lineChart.setOption(lineOption)
        circleChart.setOption(circleOption)
        barChart.setOption(barOption)
    },[])
    let monthName=['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月']
    let showMonthName:any[]=[]
    let nowMonth=new Date().getMonth()
    showMonthName=[...monthName.slice(0,nowMonth+1)]
    if(nowMonth<9){
        showMonthName=[...monthName.slice(12-(9-nowMonth)),...showMonthName]
    }
    let dateName=['周日','周一','周二','周三','周四','周五','周六']
    /**
     * {
     *  
     *  date:"",
     *  number:0,
     *  position:[x,y]
     * }
     */
    let blockList:any[]=[

    ]
    let startY=0,startX=524
    let startYIndex=new Date().getDay()

    for(let i=0;i<dates.length;i++){
        
        if(startYIndex==-1){
            startYIndex=6
            startX-=13
        }
        startY=startYIndex*13
        //末尾开始算
        blockList=[
            {
                date:dates[i],
                number:0,
                position:[startX,startY]
            },
            ...blockList
        ]
        startYIndex--
    }
    return ReactDOM.createPortal(
        <div className="dashBordContainer" onClick={close}>
            <div className="dashBord">
                <div style={{width:'100%',height:'auto',position:'relative'}}>
                    <div className="tenMonthContainer">
                        <div className="monthTitle">
                            {
                                showMonthName.map(name=>{
                                    return <div className="monthName">{name}</div>
                                })
                            }
                        </div>
                        {/**date 与 方块*/}
                        <div className="dayAndBlock">
                            <div className="dayTitle">
                                {
                                    dateName.map(day=>{
                                        return <div className="dayName">{day}</div>
                                    })
                                }
                            </div>
                            <div className="blocks">
                                {
                                    blockList.map(block=>{
                                        return  <div className="block" 
                                        data-name={block.date}
                                        style={{
                                            left:block.position[0]+'px',
                                            top:block.position[1]+'px'}}>
                                            
                                        </div>
                                    })
                                }
                            </div>
                        </div>
                    </div>
                    <div className="radarImage" id="radarImage"></div>
                    <div style={{clear:'both'}}></div>
                    <div className="lineImage" id="lineImage"></div>
                    <div className="circleImage" id="circleImage"></div>
                    <div className="barImage" id="barImage"></div>
                </div>
            </div>
        </div>,
        target
    )
}
export function PageTitle(){
    let [theme,setTheme]=useState("light")
    let [showDashBord,setShow]=useState(false)
    function openLeftBar(){
        document.getElementById('Menu')?.classList.remove("MenuClose")
    }
    function openDashBord(){
        setShow(true)
    }
    function closeDashBord(){
        setShow(false)
    }
    function changeTheme(){
      if(theme=='dark'){
        document.body.setAttribute("theme",'light')
        document.body.setAttribute("arco-theme",'light')
        setTheme("light")
      }else{
        document.body.setAttribute("theme",'dark')
        document.body.setAttribute("arco-theme",'dark')
        setTheme("dark")
      }
    }
    return (
        <div className="pageTitle">
            
            <div className="pageTitle-item">
                <IconCommon className="openLeftBar" onClick={openLeftBar}></IconCommon>
                <div className="clock" id='dashBordButton' onClick={openDashBord}>
                    <IconClockCircle style={{color:"var(--colorText-1)"}}></IconClockCircle>
                </div>
                {/**域名 */}
                <IconHome className="hostIcon" style={{fontSize:'18px',fontWeight:'700',color:'rgba(var(--gray-8))',position:'absolute',left:'16px',top:'5px'}}></IconHome>
                <div className="hostName">guitu18.com</div>
                {/**数据面板 */}
                {showDashBord?<CreateTeleport close={closeDashBord}></CreateTeleport>:null}
                {/**搜索框 */}
                <div className="searchBord">
                    <input className="searchInput" placeholder="输入关键词搜索..."></input>
                    <div className="searchButton">
                        <IconSearch style={{fontSize:'16px',marginTop:'8px'}}></IconSearch>
                    </div>
                </div>
                {/**主题切换按钮 */}
                <div className="themeBar" onClick={changeTheme} style={{
                  color:theme=='dark'?'var(--colorText-1)':''
                }}>
                  {theme=='light'?
                    <IconMoonFill style={{marginLeft:'16px'}}></IconMoonFill>
                    :<IconSunFill style={{marginLeft:'16px',color:"var(--colorText-1)"}}></IconSunFill>
                  }
                  {
                    theme=="light"?"夜间模式":"日间模式"
                  }
                </div>
            </div>
            
        </div>
    )
}